Skip to content

Conversation

@aarondancer
Copy link

@aarondancer aarondancer commented Aug 12, 2018

New size: 282 bytes
Tested in: Chrome, Firefox
Demo: https://aarondancer.github.io/TinyEditor/

@aarondancer aarondancer changed the title Use JS to dynamically create elements, Flexbox for layour 280 bytes: Use JS to dynamically create elements, Flexbox for layout Aug 12, 2018
@explodingcamera
Copy link

explodingcamera commented Aug 12, 2018

I would actually stick to

i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'

for better compatibility and the same size, and

document.body.innerHTML+='hcj'.replace(/./g,'<textarea id=$&></textarea>')+'<hr width=100%><iframe id=i>'

would be actually smaller than the es6 version.

Also, font-size:1em seems unnecessary since it sets the size to the default

@aarondancer
Copy link
Author

@explodingcamera the default size actually isn't 1em. 1em = 16px/root font size. At least for me, my browsers render 11px as the default, so 1em is substantially bigger and relatively close to 18px like the original version.

@aarondancer
Copy link
Author

@explodingcamera the ES6 implementation for oninput is 1 byte smaller and supports all modern browsers.

Nice catch for the onload. Saves 2 bytes.

@aarondancer aarondancer changed the title 280 bytes: Use JS to dynamically create elements, Flexbox for layout 278 bytes: Use JS to dynamically create elements, Flexbox for layout Aug 12, 2018
@gruhn
Copy link

gruhn commented Aug 13, 2018

<style>
  [id]{display:flex;flex-flow:wrap;font-size:1em;flex:1}
</style>

<body
  oninput="i.srcdoc=h[v='value']+`<style>${c[v]}</style><script>${j[v]}</script>`"
  onload="b.innerHTML='hcj'.replace(/./g,'<textarea id=$&></textarea>')+'<hr width=100%><iframe id=i>'"
  id=b>
  • assign id to body and reuse reference: -12 bytes
  • store 'value' in a variable: -1 byte
  • don't use template syntax to prepend strings: -2 bytes
  • putting style above body allows body.innerHTML= instead of body.innerHTML+=: -1 byte

=> with minimal white space: 262 bytes

@kvker
Copy link

kvker commented Aug 15, 2018

i have try to fix 'placeholder', but it was impossible...

@aarondancer aarondancer changed the title 278 bytes: Use JS to dynamically create elements, Flexbox for layout 263 bytes: Use JS to dynamically create elements, Flexbox for layout Aug 15, 2018
@aarondancer aarondancer changed the title 263 bytes: Use JS to dynamically create elements, Flexbox for layout 271 bytes: Use JS to dynamically create elements, retain layout & placeholders, abuse browsers Aug 16, 2018
@aarondancer aarondancer changed the title 271 bytes: Use JS to dynamically create elements, retain layout & placeholders, abuse browsers 271 bytes: Use JS to dynamically create elements, retain layout & placeholders Aug 16, 2018
@aarondancer aarondancer changed the title 271 bytes: Use JS to dynamically create elements, retain layout & placeholders 282 bytes: Use JS to dynamically create elements, retain layout & placeholders Aug 16, 2018
@aarondancer
Copy link
Author

Updated with placeholders and old styling (minus font-size)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants